<template>
      <div class="footer">
      <div class="wrapper">
        <div class="service">
          <ul>
            <li>
              <span></span>
              <p>价格亲民</p>
            </li>
            <li>
              <span></span>
              <p>物流快捷</p>
            </li>
            <li>
              <span></span>
              <p>保险保障</p>
            </li>
            <li>
              <span></span>
              <p>售后无忧</p>
            </li>
          </ul>
        </div>
        <div class="help">
          <div class="left">
            <dl>
              <dt>服务保障</dt>
              <dd><a href="#">正品保证</a></dd>
              <dd><a href="#">7天无理由放心退</a></dd>
              <dd><a href="#">7*15小时客户服务</a></dd>
              <dd><a href="#">7天无理由随心换</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
                <dd><a href="#">导购演示</a></dd>
                <dd><a href="#">订单操作</a></dd>
                <dd><a href="#">会员注册</a></dd>
                <dd><a href="#">账户管理</a></dd>
            </dl>
            <dl>
              <dt>支付方式</dt>
              <dd><a href="#">23家主流网银支付</a></dd>
                <dd><a href="#">支付宝、银联等支付</a></dd>
                <dd><a href="#">信用卡支付</a></dd>
                <dd><a href="#">零钱支付</a></dd>
            </dl>
            <dl>
              <dt>配送方式</dt>
              <dd><a href="#">配送范围及运费</a></dd>
                <dd><a href="#">验货与签收</a></dd>
            </dl>
            <dl>
              <dt>售后服务</dt>
                <dd><a href="#">退货政策</a></dd>
                <dd><a href="#">退货流程</a></dd>
                <dd><a href="#">退款方式和时效</a></dd>
                <dd><a href="#">换货服务</a></dd>
            </dl>
          </div>
          <div class="right">
            <ul>
              <li>
                <div><img src="@/assets/images/app.png" alt="" /></div>
                <p>APP下载二维码</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="copyright">
          <div class="db">
          <p>
            <a href="#">关于我们</a>|
                <a href="#">唯品招聘</a>|
                <a href="#">About us</a>|
                <a href="#">Investor Relations</a>|
                <a href="#">唯品会公益</a>|
                <a href="#">品牌招商</a>|
                <a href="#">唯品卡</a>|
                <a href="#">隐私条款</a>|
                <a href="#">联系我们</a>|
                <a href="#">廉正举报</a>
          </p>
        </div>
          
          <p>Copyright © 2008-2020 vip.com，All Rights Reserved 使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司<br>
            粤公网安备 44010302111111号    粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2024〕2309-170号 <br>
            经营主体证照   互联网药品信息服务资格证书：（粤）-经营性-2023-0508 网络食品交易第三方平台备案凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案<br>
            凭证：（粤）网械平台备字[2019]第00001号 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号  未成年人关怀专区<br>
            违法和不良信息举报电话：4006789888 算法推荐违规举报电话：4006789888 广东省放心消费承诺单位<br>
            </p>
          
        </div>
      </div>
    </div>
</template>

<style scoped>
/* 版权底部 */
.footer {
  height: 400px;
  background-color: #fffdfd;
  margin: 0 auto;
  width: 1240px;
}
.footer .service {
  padding: 60px 0;
  height: 30px;
  border-bottom: 1px solid #E8E8E8;
}
.footer .service ul {
  display: flex;
  justify-content: space-around;
}
.footer .service li {
  display: flex;
  line-height: 58px;
}
.footer .service p {
  color: #969696;
}
.footer .service span {
  display: block;
  margin-right: 20px;
  width: 58px;
  height: 58px;
  background-image: url(../../assets/images/sprite.png);
}
.footer .service li:nth-child(2) span {
  background-position: 0 -58px;
}
.footer .service li:nth-child(3) span {
  background-position: 0 -116px;
}
.footer .service li:nth-child(4) span {
  background-position: 0 -174px;
}
.footer .service p {
  font-size: 28px;
}
.footer .help {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.footer .help .left {
  display: flex;
}
.footer .help .left dl {
  margin-right: 70px;
}
.footer .help .left dt {
  margin-bottom: 20px;
  font-size: 18px;
  color: #000000;
}
.footer .help .left dd {
  margin-bottom: 3px;
  font-size: 15px;
}
.footer .help .left dd a {
  color: #969696;
}
.footer .help .right ul {
  display: flex;
  align-items: flex-start;
}
.footer .help .right li:nth-child(1) {
  margin-right: 55px;
  text-align: center;
}
.footer .help .right div {
  margin-bottom: 10px;
  width: 120px;
  height: 120px;
  color: #969696;
}
.icon-customer-service {
  margin-left: 3px;
  color: #00BE9A;
}
.copyright .db{
  margin-top: 40px;
  text-align: center;
  color: #ffffff;
  background: #D7237E;
}
.copyright .db a{
  color: #ffffff;
  font-size: 13px;
}
.copyright {
  margin-top: 40px;
  text-align: center;
  color: #A1A1A1;

}
.copyright p {
  margin-bottom: 14px;
}
.copyright a {
  margin: 0 10px;
  color: #A1A1A1;
}
</style>